﻿/**
* @description 
* 两层选择组件
*/

(function($) {
    $.extend($.fn, {
        selection: function(settings, checkedValues) {
            var options = {
                multiSelect: true,
                maxSelect: 5,
                includeParent: true,
                callback: null,
                tipInfo: "已选择的洲或国家(最多选择5个国家或一个洲)"
            };

            $.extend(options, settings);

            var preParentClick = false;
            var tempdiv = GetTempdiv();
            var contdiv = $(".Contentbox1", tempdiv);
            var menudiv = $(".Menubox1", tempdiv);
            var checkul = $(".checked >ul", tempdiv);
            var menubox = [];
            var subbox = [];
            var checkeddata = [];

            var ConfirmFunc = function() {
                tempdiv.CloseDiv();
                var selectedname = [];
                var selectedvalue = [];
                $(":checkbox", tempdiv).each(function() {
                    var $checkbox = $(this);
                    if ($checkbox.attr("checked")) {
                        selectedname.push($checkbox.attr("name"));
                        selectedvalue.push($checkbox.val());
                    }
                });
                options.callback(selectedname, selectedvalue);
            };

            if (checkedValues == undefined) {
                $("li", checkul).each(function() {
                    $li = $(this);
                    checkeddata.push($li.attr("tvalue"));
                });
            }
            else {
                checkeddata = checkedValues.split(",");
            }

            menudiv.html("");
            contdiv.html("");

            var $this = this;
            var index = 0;
            menubox.push("<ul>");

            $(">ul >li", $this).each(function() {
                var $li = $(this);

                menubox.push("<li id='two", index, "'");
                subbox.push("<div id='con_two", index, "'");
                if (index == 0) {
                    menubox.push(" class='hover'");
                    subbox.push(" class='hover'");
                }
                else {
                    subbox.push(" style='display:none'");
                }
                menubox.push(">", $li.attr("tname"), "</li>");
                subbox.push(">");

                if (options.includeParent) {
                    subbox.push("<span style='color:black'>", "<input parent='true' type='checkbox' ");
                    if ($.inArray($li.attr("tvalue"), checkeddata) != -1) {
                        subbox.push("checked ");
                        preParentClick = true;
                    }
                    subbox.push("name='", $li.attr("tname"), "' value='", $li.attr("tvalue"), "'/>&nbsp;");
                    subbox.push($li.attr("tname"), "</span>");
                }

                $(">ul >li", $li).each(function() {
                    var $subli = $(this);
                    subbox.push("<span style='color:black'>", "<input type='checkbox' ");
                    if ($.inArray($subli.attr("tvalue"), checkeddata) != -1) {
                        subbox.push("checked ");
                    }
                    subbox.push("name='", $subli.attr("tname"), "' value='", $subli.attr("tvalue"), "'/>&nbsp;");
                    subbox.push($subli.attr("tname"), "</span>");
                });
                subbox.push("</div>");
                contdiv.append(subbox.join(""));
                subbox = [];
                index += 1;
            });

            menubox.push("</ul>");
            menudiv.append(menubox.join(""));

            if (options.multiSelect) {
                generateOption("", false);
            }
            else {
                generateOption(checkeddata[0], false);
            }

            $("#countryConfirm", tempdiv).one("click", ConfirmFunc);
            tempdiv.OpenDiv(settings);

            $(".Menubox1 >ul >li", tempdiv).click(function() {
                $(this).addClass("hover");
                $(this).siblings().removeClass("hover");
                var content = $("#con_" + $(this).attr("id"));
                content.show();
                content.siblings().hide();
            });

            $(":checkbox", tempdiv).click(function() {
                var clickedCheckBox = $(this);
                var selectedvalue = [];
                var parentClick = clickedCheckBox.attr("parent") == "true";

                $(":checkbox", tempdiv).each(function() {
                    var $checkbox = $(this);
                    if ($checkbox.attr("checked")) {
                        selectedvalue.push($checkbox.val());
                    }
                });

                if (!parentClick && options.maxSelect < selectedvalue.length) {
                    clickedCheckBox.removeAttr("checked");
                    return;
                }

                var parentClick = clickedCheckBox.attr("parent") == "true";
                generateOption(clickedCheckBox.val(), parentClick);
            });

            function generateOption(clickedValue, parentClick) {
                var selectbox = [];

                $(":checkbox", tempdiv).each(function() {
                    var $checkbox = $(this);
                    var sameFlag = $checkbox.val() == clickedValue;

                    if ($checkbox.attr("checked")) {
                        if (preParentClick && !sameFlag) {
                            $checkbox.removeAttr("checked");
                            return;
                        }

                        if (parentClick && !sameFlag) {
                            $checkbox.removeAttr("checked");
                            return;
                        }

                        if (!options.multiSelect && !sameFlag) {
                            $checkbox.removeAttr("checked");
                            return;
                        }

                        selectbox.push("<li tvalue='", $checkbox.val(), "'><a></a>");
                        selectbox.push($checkbox.attr("name"), "</li>");
                    }
                });

                checkul.html("");
                checkul.append(selectbox.join(""));
                preParentClick = parentClick;

                $("li", checkul).click(function() {
                    $checkli = $(this);
                    $(":checkbox", tempdiv).each(function() {
                        var $checkbox = $(this);
                        if ($checkbox.attr("checked")) {
                            if ($checkbox.val() == $checkli.attr("tvalue")) {
                                $checkbox.removeAttr("checked");
                            }
                        }
                    });
                    generateOption(false, "");
                });
            }



            function GetTempdiv() {
                var result = $("#popcountry");
                if (result.length == 0) {
                    var tempdiv = [];
                    tempdiv.push("<div class='framebox' id='popcountry' style='display:none'>",
				"<div class='top_one'>",
				"	<span><a id='countryConfirm' href='#'>[ 确定 ]</a></span>{0}</div>",
				"	<div class='checked'><ul></ul>",
				"	<div class='clear'></div>",
				"</div>",
				"<div id='SelectionTab'>",
				"	<div class='Menubox1'></div>",
				"	<div class='Contentbox1'>",
                "		<div class='clear'></div>",
				"	</div>",
				"</div>",
				"<div class='clear'></div>",
				"</div>");
                    $(document.body).append(tempdiv.join("").replace("{0}", options.tipInfo));
                    result = $("#popcountry");
                }
                return result;
            }
        }

    });

})(jQuery);